<template>
  <div id="account_login">

			<header class="mui-bar mui-bar-nav"  >
				<a @tap.stop="close_account_view" class="mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
				<h1 class="mui-title"></h1>
			</header>
      <div class="mui-content">
        <div id="logn_form">
          <div class="top">
            <img src="../../assets/images/logo_top.png" />
          </div>
          <div class="inp">
            <i class="i_name"></i>
            <input type="tel" v-model="phone" placeholder="请输入手机号" />
          </div>
          <div class="inp">
            <i class="i_pwd"></i>
            <input type="password" v-model="password" placeholder="密码" />
          </div>
          <!-- <div class="ckeck" >
            <i class="iconfont icon-zhengfangxuanze"></i>
            <label>记住登录密码</label>
          </div> -->
          <div class="btn" @tap="login_fun">
            登录
          </div>
          <div class="txt">
            <a @tap="open_register">立即注册</a>
            <a @tap="open_findpwd">忘记密码？</a>
          </div>
          <!-- <div class="wx_login"><img src="../../assets/images/wx.png"/></div> -->
          <div class="bottom">

              <p>没有账号?点击快速注册</p>

            <div class="wx" @tap="wx_login">
              <span>微信登录</span>
              <i class="mui-icon mui-icon-weixin"></i>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import account_ajax from '@/ajax/account_ajax';
import wx_login_fun from '../../tools/wx_login'
import reg from "@/tools/reg";
import ls from "@/tools/localstorage"
export default {
	name: "account_login",
	data(){
		return{
			phone:'',
			password:'',
			is_save_account:false,

		}
	},
	methods:{
    // 手机号登陆
		login_fun(){
      if(!reg.test_phone(this.phone)){
        mui.toast("请输入正确的手机号")
        return
      }
      if(!this.password){
        mui.toast("请输入密码")
        return
      }

			account_ajax.login({
				phone:this.phone,
				pwd:this.password
			},res=>{
				mui.toast("登陆成功")
        //将用户信息放入本地缓存
        ls.set("user_info",res);
        // 将用户信息放入全局状态
        this.$store.commit("up_data_user",res);
        // 更新社区信息
        if(res.comyname){
          this.$store.commit("up_data_community",{
            name:res.comyname,
            id:res.comyid,
            sqid:res.comyid
          });
        }


        // 关闭登陆界面
        this.close_account_view();
			})
    },
    // 微信登陆
    wx_login(){
		  var that = this;
      console.log("微信登陆");
      mui.plusReady(function () {
        wx_login_fun(res=>{
          //将用户信息放入本地缓存
          ls.set("user_info",res);
          // 将用户信息放入全局状态
          that.$store.commit("up_data_user",res);
          // 更新社区信息
          if(res.comyname){
            that.$store.commit("up_data_community",{
              name:res.comyname,
              id:res.comyid,
              sqid:res.comyid
            });
          }
          // 关闭登陆界面
          that.close_account_view();
        });
      })
    },
    // 打开注册页
    open_register(){
      this.$store.commit("open_login_view",false)
      this.$store.commit("open_register_view",true)
    },
    // 打开找回密码页
    open_findpwd(){
      this.$store.commit("open_login_view",false)
      this.$store.commit("open_findpwd_view",true)
    },
    // 关闭登陆界面
    close_account_view(){
      this.$store.commit("open_account_view",false)
    }
	},
	created(){

	}
};




</script>










<style lang="less" scoped>
#account_login {
  min-height: 100vh;
	background: #1c83fc;
	.mui-bar{
		box-shadow: none;
	}
}
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
	margin:0;
	padding: 0;
	border:none;
}
ul,
ol {
  list-style: none;
}

body input[type="text"],
ul,
li,
input[type="password"] {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.mui-bar {
  background: transparent;
}

input::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}

.clear {
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}
/*顶部*/
/*登录表单*/

.mui-content {
  background: transparent;
}

#logn_form {
  padding: 0 0.906rem/0.625;
  margin-top: 1rem/0.625;
}

#logn_form .top {
  width: 2.613rem/0.625;
  height: 2.613rem/0.625;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.173rem/0.625;
}

#logn_form .top img {
  width: 2.08rem/0.625;
  height: 2.08rem/0.625;
  display: block;
}

#logn_form .inp {
  width: 100%;
  display: flex;
  align-items: center;
  height: 0.88rem/0.625;
  border-bottom: 2px solid #fff;
  margin-bottom: 0.5rem/0.625;
}

#logn_form .inp i {
  display: block;
  width: 0.56rem/0.625;
  height: 0.56rem/0.625;
  margin-right: 0.133rem/0.625;
  margin-left: 0.053rem/0.625;
}

#logn_form .inp .i_name {
  background: url(../../assets/images/logo_zh.png) no-repeat;
  background-size: 100% 100%;
}

#logn_form .inp .i_pwd {
  background: url(../../assets/images/logo_pwd.png) no-repeat;
  background-size: 100% 100%;
}

#logn_form .inp input {
  width: 7.4rem/0.625;
  height: 0.6rem/0.625;
  line-height: 0.6rem/0.625;
  border-left: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 0.453rem/0.625;
  text-indent: 0.266rem/0.625;
}

#logn_form .ckeck {
  text-align: center;
  margin-bottom: 0.2rem/0.625;
}

#logn_form .ckeck label {
  font-size: 0.293rem/0.625;
  color: #fff;
}

#logn_form .ckeck i {
  font-size: 0.293rem/0.625;
  color: #fff;
}

#logn_form .btn {
  width: 8rem/0.625;
  height: 1.066rem/0.625;
  line-height: 1.066rem/0.625;
  font-size: 0.52rem/0.625;
  color: #fff;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.1rem/0.625;
  margin-bottom: 0.373rem/0.625;
}

#logn_form .txt {
  display: flex;
  justify-content: space-between;
}

#logn_form .txt a {
  font-size: 0.426rem/0.625;
  color: #fff;
  text-decoration: underline;
}

#logn_form .bottom {
  position: relative;
  top: 1rem/0.625;
  width: 8rem/0.625;
  text-align: center;
  color: #fff;
}

#logn_form .bottom p {
  color: #fff;
  margin-bottom: 0.573rem/0.625;
  font-size: 0.426rem/0.625;
}

#logn_form .bottom .wx {
  width: 3.706rem/0.625;
  height: 1rem/0.625;
	display: flex;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 0.2rem/0.625;
  margin: 0 auto;
}

#logn_form .bottom .wx span {
  color: #fff;padding: 0.3rem
}

#logn_form .bottom .wx i {
  font-size: 0.48rem/0.625;
  margin-left: 0.133rem/0.625;
}

.wx_login {
  text-align: center;
  padding-top: 20px;
}

.wx_login img {
  width: 20%;
}
</style>

